<script setup lang="ts">
import { watch } from 'vue'
import useAuth from '../composition/useAuth'

const props = defineProps<{
   captcha_key: string
   captcha_value: string
}>()

const { getSvgCaptha, svgCaptha } = useAuth()

const emit = defineEmits(['update:captcha_key', 'update:captcha_value'])

watch(svgCaptha, () => {
   emit('update:captcha_key', svgCaptha.value?.data.key)
})

await getSvgCaptha()
</script>

<template>
   <div class="flex justify-between items-center">
      <label class="text-xs sm:text-sm text-gray-600" @click="getSvgCaptha()">
         <div v-html="svgCaptha?.data.svg"></div>
      </label>
      <div class="relative">
         <input
            id="password"
            type="text"
            name="password"
            class="text-sm placeholder-gray-500 pl-5 pr-4 rounded-2xl border border-gray-400 py-2 focus:outline-none focus:border-blue-400"
            placeholder="验证码"
            @input="$emit('update:captcha_value', ($event.target as any).value)" />
      </div>
   </div>
</template>
